<template>
  <div class="carousel">
    <div class="carousel-box">
      <div
        class="carousel-item"
        :class="{'selected':p.selected}"
        @click="onCarouselItemClicked(p.id)"
        v-for="p in participants"
        :key="p.id"
      >
        <div>name:{{p.name}}|{{p.id}}</div>
        <div class="carousel-item-video">
          <meeting-video :track="p.videoTrack"></meeting-video>
          <meeting-audio v-if="!p.isLocal" :track="p.audioTrack"></meeting-audio>
        </div>
        <div>
          声音:
          <span v-show="p.audioTrack">开</span>
          <span v-show="!p.audioTrack">关</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MeetingVideo from "./MeetingVideo";
import MeetingAudio from "./MeetingAudio";
export default {
  components: { MeetingVideo, MeetingAudio },
  props: {
    conference: Object
  },
  created() {},
  methods: {
    onCarouselItemClicked(id) {
      this.conference.selectParticipant(id);
    }
  },
  mounted() {},
  computed: {
    participants() {
      return this.conference.getParticipants();
    }
  },
  watch: {}
};
</script>
<style scoped>
.carousel {
  display: flex;
  width: 100%;
  height: 160px;
  background-color: lightgrey;
  overflow-x: scroll;
  overflow-y: hidden;
}
.carousel-box {
  height: 100%;
  display: inline-flex;
}
.carousel-item {
  display: flex;
  flex-direction: column;
  width: 190px;
  height: 100%;
  margin: 0 4px 0 4px;
  background: gray;
  border: 1px solid rgba(0, 0, 0, 0);
}

.carousel-item-video {
  width: 100%;
  height: 100%;
}
.selected {
  border: 1px solid red;
}
</style>
